<!--
*Author：富行天下团队
 *
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/mall/Mall_card.js此处编写
 -->
<template>
  <div class="view-container">
    <div class="view-header">
      <div class="desc-text">
        <Icon type="md-apps" />
        <span>营地位置</span>
      </div>
      <div class="roomStatus">
        <div v-for="(i,ii) in room_status" :key="ii" @click="seaRoom(i)">
          <span class="color" :style="{ backgroundColor: i.color }"></span>
          <span :class="roomStatus == i.id ? 'active' : ''">{{ i.text }}</span>
        </div>
        <el-input class="search" size="mini" v-model="name" placeholder="请输入区域名称"></el-input>
        <Button type="success" icon="md-refresh" @click="campsiteleaseClear" size="small">刷
          新</Button>
      </div>
    </div>
    <div>
      <div v-if="DataNone">
        <div class="item__content" v-for="(item, index) in List" :key="index" :title="item.chname">
          <h2>{{ item.chname }}</h2>
          <div class="itemCont">
            <div class="item-i2" v-for="(i2, ii) in item.list" :key="ii"
              :style="{ backgroundColor: status[i2.status] }" @click="setRoomStatus(i2)">
              <div class="flxt">
                <h2>{{ i2.code }}</h2>
                <div>{{ setType(i2.type) }}</div>
              </div>
              <div>{{ houseType(i2.houseType) }}</div>
              <div class="fx">
                <div>{{ i2.bookingName }}</div>
                <div>{{ i2.bookingPhone }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="none" v-else>暂无数据</div>
    </div>

    <placeOrder ref="CampHouseOrderBox"></placeOrder>
  </div>
</template>

<script>
import "../../assets/css/ViewGrid.less";
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";
import placeOrder from "./CampHouseOrderBox.vue"
export default {
  name: "CampLocation",
  components: {
    VolBox,
    VolForm,
    placeOrder
  },
  data() {
    return {
      List: [],
      status: ["#6fc", "#6cc360", "#8c9b8a", "#ff0000", "#5fa7cb"],
      room_status: [
        {
          id: -1,
          color: "",
          text: "全部",
        },
        {
          id: 0,
          color: "#6fc",
          text: "待租",
        },
        {
          id: 1,
          color: "#6cc360",
          text: "预订",
        },
        {
          id: 2,
          color: "#8c9b8a",
          text: "在住",
        },
        {
          id: 3,
          color: "#ff0000",
          text: "禁用",
        },
        {
          id: 4,
          color: "#5fa7cb",
          text: "脏房",
        },
      ],
      housetypelist: [],
      Typelist: [],
      name: "",
      roomStatus: "-1",
      DataNone: true,
    };
  },
  watch: {
    name(n, o) {
      this.campsitelease();
    },
  },
  created() {
    this.GetVueDictionary();
    this.campsitelease();
  },
  methods: {
    campsiteleaseClear() {
      this.roomStatus = "";
      this.campsitelease();
    },
    seaRoom(e) {
      this.roomStatus = e.id;
      this.campsitelease();
    },
    setRoomStatus(e) {
      if (e.status == 4) {
        this.$confirm("是否将房间状态改为待租?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let parma = {
            delKeys: null,
            detailData: null,
            mainData: {
              id: e.id,
              status: 0,
            },
          };
          this.http.post("/api/CampsiteHouseItem/update", parma).then((res) => {
            if (res.status) {
              this.$Message.success("修改成功");
              this.campsitelease();
            } else {
              this.$Message.error(res.message);
            }
          });
        });
      } else if (e.status == 0) {
        // this.$refs.CampHouseOrderBox.openXD()
      }
    },
    setType(e) {
      let j = this.Typelist.filter((i) => {
        if (i.key == e) {
          return i;
        }
      });
      return j[0].value;
    },
    houseType(e) {
      let j = this.housetypelist.filter((i) => {
        if (i.key == e) {
          return i;
        }
      });
      return j[0].value;
    },
    GetVueDictionary() {
      this.http
        .post("/api/Dictionary/GetVueDictionary", [
          "houseType",
          "CampsiteHouseType",
        ])
        .then((res) => {
          res.forEach((i) => {
            if (i.dicNo == "houseType") {
              this.housetypelist = i.data;
            } else {
              this.Typelist = i.data;
            }
          });
        });
    },
    campsitelease() {
      let parmas = {
        page: 1,
        rows: 10000,
        sort: "modifyDate",
        order: "code",
        wheres: `[{\"name\":\"chname\",\"value\":\"${
          this.name
        }\",\"displayType\":\"like\"},{\"name\":\"status\",\"value\":\"${
          this.roomStatus == -1 ? "" : this.roomStatus
        }\",\"displayType\":\"text\"}]`,
      };
      this.http.post("/api/CampsiteLease/getPageData", parmas).then((res) => {
        if (res.rows.length != 0) {
          let row = res.rows;
          function mapTwoDimension(arr) {
            let dataArr = [];
            arr.map((oneDim) => {
              if (dataArr.length == 0) {
                dataArr.push({
                  chid: oneDim.chid,
                  chname: oneDim.chname,
                  chtype: oneDim.chtype,
                  list: [oneDim],
                });
              } else {
                let res = dataArr.some((item) => {
                  if (item.chid == oneDim.chid) {
                    item.list.push(oneDim);
                    return true;
                  }
                });
                if (!res) {
                  dataArr.push({
                    chid: oneDim.chid,
                    chname: oneDim.chname,
                    chtype: oneDim.chtype,
                    list: [oneDim],
                  });
                }
              }
            });
            return dataArr;
          }
          this.List = mapTwoDimension(row);
          this.DataNone = true;
        } else {
          this.DataNone = false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.none {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  transform: translateX(-50%);
}
.active {
  color: #50a0ff;
}
.search {
  width: 200px;
}
/deep/ .el-collapse-item__header {
  background-color: #50a0ff;
  color: #fff;
  padding-left: 20px;
}
.roomStatus {
  width: 100%;
  display: flex;
  justify-content: end;
  margin-top: 14px;
  height: 30px;
  div {
    margin-right: 10px;
  }
}
.color {
  width: 30px;
  height: 10px;
  display: inline-block;
}
.item__content {
  margin-top: 14px;
  .itemCont {
    display: flex;
    flex-wrap: wrap;
    .item-i2 {
      width: 19%;
      height: 100px;
      border: 1px solid;
      padding: 10px;
      margin-right: 1%;
      margin-top: 1%;
      color: #000;
      position: relative;
      .flxt {
        display: flex;
        justify-content: space-between;
      }
      .fx {
        position: absolute;
        bottom: 7px;
        bottom: 7px;
        right: 6px;
      }
    }
  }
}
</style>
